import React, { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { SearchBar, NavBar, Grid, Image, Ellipsis, SideBar } from "antd-mobile";
import request, { baseUrl } from "@/utils/request";

const tabs = ["奇幻玄幻", "武侠仙侠", "科幻游戏", "悬疑灵异", "幻想时空", "都市言情", "校园青春"];

function Shop() {
    const [datalist, setDatalist] = useState([]);
    const [tabs, setTabs] = useState([]);
    const [activeKey, setActiveKey] = useState("奇幻玄幻");
    const [keyword, setKeyword] = useState("仙王");
    const navigate = useNavigate();
    const back = () => {
        navigate(-1);
    };

    // 跳转到详情页
    const gotoDetail = useCallback((id) => {
        navigate("/detail?id=" + id);
    }, []);

    const getTabsData = async () => {
        const { data } = await request.get("/booktype/list");
        // 过滤分支数据
        setTabs(data.data);
    };

    const changeKey = useCallback((key) => {
        setActiveKey(key);
    }, []);

    const getData = async () => {
        const { data } = await request.post(`/books/list/'${activeKey}'`, {
            params: {
                booktype: activeKey,
            },
        });
        setDatalist(data.data);
    };

    useEffect(() => {
        getData();
    }, [activeKey]);

    useEffect(() => {
        getTabsData();
        getData();
    }, []);

    const gotoSearch = (e) => {
        // const { defaultValue } = e;
        navigate("/search?keyword=" + keyword);
    };

    return (
        <div style={{ height: "100%" }}>
            <NavBar
                onBack={back}
                style={{
                    position: "fixed",
                    top: 0,
                    left: 0,
                    width: "100%",
                    padding: 0,
                    backgroundColor: "#fff",
                    zIndex: 998,
                }}
            >
                书城
            </NavBar>
            <SearchBar
                placeholder={keyword}
                showCancelButton
                style={{
                    position: "fixed",
                    top: "45px",
                    left: 0,
                    width: "calc(100% - 26px)",
                    padding: "0 13px",
                    paddingRight: "13px",
                    "--background": "#e9e2e2",
                    zIndex: 999,
                }}
                onFocus={gotoSearch}
            />
            <SideBar
                style={{
                    height: "calc(100% - 70px)",
                    width: "80px",
                    position: "fixed",
                    left: 0,
                    top: "78px",
                }}
                activeKey={activeKey}
                onChange={changeKey}
            >
                {tabs.map((item) => (
                    <SideBar.Item key={item.booktype} title={item.booktype} />
                ))}
            </SideBar>

            <Grid
                columns={2}
                gap={15}
                style={{
                    marginTop: "80px",
                    width: "calc(100% - 105px)",
                    position: "absolute",
                    left: "90px",
                    // top: "78px",
                    overflowY: "auto",
                    marginRight: "13px",
                }}
            >
                {datalist.map((item) => (
                    <Grid.Item
                        key={item.id}
                        style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}
                    >
                        <Image
                            src={item.pic}
                            style={{ width: "100%", height: "100%" }}
                            onClick={gotoDetail.bind(null, item.id)}
                        />
                        <Ellipsis direction="end" content={item.book} style={{ fontWeight: "bold" }} />
                    </Grid.Item>
                ))}
                <Grid.Item style={{ display: "flex", justifyContent: "center", lineHeight: "171.94px" }}>
                    没有更多了
                </Grid.Item>
            </Grid>
        </div>
    );
}

export default Shop;
